<template>
    <div class="systemrole">
        <div class="search">
            <span style="padding-right:15px;">员工账号</span>
            <input type="text" v-model="employeesInput" placeholder="请输入员工账号" style="margin-right:25px;">
            <span style="padding-right:15px;">是否启用</span>
            <el-select v-model="enableValue" placeholder="请选择" style="margin-right:15px;">
                <el-option v-for="item in enableOptions" :key="item.value" :label="item.label"  :value="item.value"></el-option>
            </el-select>
            <span class="my-btn my-back-blue" @click="getemployeesData">筛选</span>
            <span class="my-btn my-back-gray" @click="emptySearch">清空</span>
            <span class="my-btn my-back-green" @click="addemployees">添加员工</span>
        </div>
        <el-table :data="employeesData" border style="width:100%;">
             <el-table-column  type="index" label="序号"  width="60"></el-table-column>
            <el-table-column prop="username" label="账号"></el-table-column>
            <el-table-column prop="name" label="昵称"></el-table-column>
            <el-table-column prop="sex" label="性别" width="70"></el-table-column>
            <el-table-column prop="phone" label="手机号"></el-table-column>
            <!-- <el-table-column prop="email" label="邮箱"></el-table-column> -->
            <el-table-column prop="roles" label="角色名称"></el-table-column>
            <el-table-column label="是否启用" width="80">
                <template slot-scope="scope">
                    <span v-if="scope.row.state">启用</span>
                    <span v-else>停用</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="注册时间"></el-table-column>
            <el-table-column label="操作" width="130">
                <template slot-scope="scope">
                    <span style="color:#007bff;padding:0 6px;" @click="editorClick(scope.row.platformUserId)">编辑</span>
                    <span style="color:#007bff;padding:0 6px;" @click="deleClick(scope.row.platformUserId)">删除</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage"  :page-size="5"  :page-sizes="[5, 10, 15, 20]"  layout="total, sizes, prev, pager, next, jumper"  :total="total"></el-pagination>
        <div class="mask" v-if="maskNum">
            <div class="window">
                <div class="window-top">
                    <h3><span v-if="!editNum">新增</span><span v-else>编辑</span>员工</h3>
                    <span @click="down">x</span>
                </div>
                <div class="window-content">
                    <div class="content">
                        <span>昵称</span>
                        <input type="text" v-model="addemployeesData.name">
                        <p v-if="userName">请输入昵称</p>
                    </div>
                    <div class="content">
                        <span>账号</span>
                        <input type="text" v-model="addemployeesData.username">
                        <p v-if="userID">请输入账号</p>
                    </div>
                    <div class="content">
                        <span>性别</span>
                        <input type="text" v-model="addemployeesData.sex">
                    </div>
                    <div class="content">
                        <span>是否启用</span>
                        <el-select v-model="addemployeesData.state" placeholder="请选择" style="margin-right:15px;">
                            <el-option v-for="item in enableOptions" :key="item.value" :label="item.label"  :value="item.value"></el-option>
                        </el-select>
                    </div>
                    <div class="content">
                        <span>手机号</span>
                        <input type="text" v-model="addemployeesData.phone">
                        <p v-if="userPhopne">请输入正确的手机号</p>
                    </div>
                    <!-- <div class="content">
                        <span>邮箱</span>
                        <input type="text" v-model="addemployeesData.email">
                    </div> -->
                    <div class="content">
                        <span>密码</span>
                        <input type="text" v-model="addemployeesData.password"> 
                        <p v-if="userPass">请输入密码</p>
                    </div>
                    <div class="content">
                        <span>角色id数组</span>
                        <el-select
                            v-model="addemployeesData.roleIds"
                            multiple
                            placeholder="请选择"
                            @remove-tag="removeTag"
                            @change="tagChange"
                            >
                            <el-option
                                v-for="item in roleList"
                                :key="item.roleId"
                                :label="item.roleName"
                                :value="item.roleId"
                            />
                        </el-select>
                    </div>
                </div>
                <div style="text-align:center;">
                    <span class="my-btn my-btn-blue" style="padding:8px 30px;" @click="submit">提交</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            //---------------------------------提交验证
            userName:false,//昵称  
            userID:false,//账号
            userPhopne:false,//手机号
            checkPhone:false,//验证手机号
            userPass:false,//密码 
            //-------------------------------------分割线
            employeesInput:'',//员工姓名
            enableValue:'',//是否启用
            enableOptions:[//是否启用选择数组
                {value: 1,label: '启用'},
                {value: 0,label: '停用'},
            ],
            roleList: [],
            employeesData:[],//员工数据
            addemployeesData:{//新增角色数据
                "email": "",
                "name": "",
                "password": "",
                "phone": "",
                "roleIds": [],
                "sex": "",
                "state": 1,
                "username": ""
            },
            editNum:0,//0--新增，1--编辑
            page:1,//第几页
            pageSize:5,//每页几条
            currentPage:1,//跳转到第几页
            total:0,//总共几条
            maskNum:false,//控制弹窗弹出
        }
    },
    watch: {
        //-------------------------------提交验证
        //昵称
        'addemployeesData.name'(newVal, oldVal) {
            if(newVal !== '') {
                this.userName = false 
            }
        },
        //账号
        'addemployeesData.username'(newVal, oldVal) {
            if(newVal !== '') {
                this.userID = false 
            }
        },
        //手机号
        'addemployeesData.phone'(newVal, oldVal) {
            if(!(/^1[3456789]\d{9}$/.test(newVal))){ 
                this.userPhopne = true
                this.checkPhone = false
            }else {
                this.userPhopne = false
                this.checkPhone = true
            }
            if(newVal === '') {
                this.userPhopne = false
                this.checkPhone = false
            }
        },
        //密码
        'addemployeesData.password'(newVal, oldVal) {
            if(newVal !== '') {
                this.userPass = false 
            }
        },
        //----------------------------------分割线
    },
    mounted(){
        this.getemployeesData()
    },
    methods:{
        removeTag(index) {
        console.log(index)
        },
        tagChange(index) {
        this.$forceUpdate()
        console.log(index)
        },
        //获取角色数据
        getemployeesData(){
            var param={
                "page": this.page,
                "pageSize": this.pageSize,
                "search":this.employeesInput,
                "state": this.enableValue
            }
            var param={
                "page": this.page,
                "pageSize": this.pageSize,
                "search":this.employeesInput,
            }
            this.axios({
                url: "/platform_user/getAll",
                method: "post",
                data: JSON.stringify(param),
            }).then(res=>{
                this.employeesData=res.data.data.list
                this.total=res.data.data.total
            })
            this.axios({
                url: '/role/getAll',
                method: 'post',
                data: JSON.stringify(param),
            }).then(res=>{
                this.roleList = res.data.data.list
            })
        },
        //编辑
        editorClick(id){
            this.editNum=1
            this.maskNum=true
            var param={"platformUserId": id}
            this.axios({
                url: "/platform_user/getById",
                method: "post",
                data: JSON.stringify(param),
            }).then(res=>{
                this.addemployeesData=res.data.data
                this.addemployeesData.roleIds = res.data.data.ids
            })
        },
        //新增角色
        addemployees(){
            this.editNum=0
            this.maskNum=true
        },
        //提交
        submit(){
            console.log(this.addemployeesData)
            if(this.editNum){
                var msg='修改'
                var url="/platform_user/update"
            }else{
                var msg='添加'
                var url="/platform_user/save"
            }
            //-----------------------------------提交验证
            if(this.addemployeesData.name === '') {
                this.userName = true
                return
            }
            if(this.addemployeesData.username === '') {
                this.userID = true
                return
            }
            if(!this.checkPhone) {
                this.userPhopne = true
                return
            }
            if(this.addemployeesData.password === '') {
                this.userPass = true
                return
            }
            //-----------------------------------------分割线
            this.$confirm('是否'+msg+'该员工', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var param=this.addemployeesData
                this.axios({
                    url: url,
                    method: "post",
                    data: JSON.stringify(param),
                }).then(res=>{
                    this.$message({
                        type: 'success',
                        message: msg+'成功!'
                    });
                    this.down()
                    this.getemployeesData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消添加'
                });          
            });
        },
        //关闭
        down(){
            this.maskNum=false
            this.userName = false
            this.userID = false
            this.userPhopne = false
            this.userPass = false
            this.addemployeesData={
                "email": "",
                "name": "",
                "password": "",
                "phone": "",
                "roleIds": [],
                "sex": "",
                "state": 1,
                "username": ""
            }
        },
        //清空
        emptySearch(){
            this.employeesInput=''
            this.enableValue=''
            this.getemployeesData()
        },
        //删除角色
        deleClick(id){
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var param={
                    "platformUserId":id
                }
                this.axios({
                    url: "/platform_user/delete",
                    method: "post",
                    data: JSON.stringify(param),
                }).then(res=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getemployeesData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        },
        //当每页显示条数变化时触发
        handleSizeChange(val){
            this.pageSize=val
            this.getemployeesData()
        },
        //当页数变化时触发
        handleCurrentChange(val){
            this.page=val
            this.getemployeesData()
        },
    },
}
</script>

<style scoped>
.search{
    padding-left: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
}
.my-btn{
    padding:8px 15px ;
    margin-left: 10px;
    border: 0;
}
.my-btn-blue{
    color: #fff;
    background: #007bff;
}
.my-back-blue{
    color: #007bff;
    background: #007bff2d;
}
.my-back-gray{
    color: #62676d;
    background: #62676d1e;
}
.my-back-green{
    color: #3dc015;
    background: #3dc01518;
}
/* 弹窗开始 */
.mask{
    width:100vw;
    height: 100vh;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background: rgba(65, 60, 60, 0.555);
}
.window{
    width: 460px;
    height: auto;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 20px;
}
/* 弹窗头 */
.window-top{
    display: flex;
    justify-content: space-between;
}
.window-top h3{
    font-weight: 400;
}
/* 弹窗主体内容 */
.window-content{
    margin: 40px 0 30px;
}
.window-content .content{
    margin-bottom: 15px;
}
.window-content .content span{
    padding-right: 16px;
    display: inline-block;
    width: 100px;
    text-align: right;
}
.window-content .content input{
    width: 280px;
}
.window-content .content p{
    text-align: center;
    color: red;
}
/* 弹窗结束 */
</style>